<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">姓名</view>
				<input  v-model="name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">电话</view>
				<input  v-model="tel" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">地区</view>
				<input  v-model="nowAddress" disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item">
				<view class="left">详细地址</view>
				<input  v-model="addressDetail" type="text" placeholder-class="line" placeholder="街道、楼牌等" />
			</view>
			<view class="item">
				<view class="left">邮政编码</view>
				<input  v-model="postalCode" type="text" placeholder-class="line" placeholder="填写邮政编码" />
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="set">设置默认地址</view>
				<u-switch size="45" color="#0c34ba" v-model="checked" @change="setDefault"></u-switch>
			</view>
		</view>
		<button @click="submit" class="submit">保存地址</button>
		<button v-if="isEdit" @click="delAddress" class="submit white">删除</button>
		<u-picker mode="region" v-model="showAddr" @confirm='selectAddr'></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showAddr: false,
			checked:false,
			nowAddress:'',
			postalCode:'',
			addressDetail:"",
			province: "",
			city: "",
			county: "",
			name: '',
			tel: '',
			areaCode:'',
			aid:'',
			isEdit:''
		};
	},
	onLoad(option) {
		if(option.id != 0){
			this.aid = option.id
			this.getAddress()
			//删除键
			this.isEdit = true
		}else{
			this.isEdit = false
		}
	},
	methods: {
		setDefault(e) {
			this.checked = e
		},
		showRegionPicker() {
			this.showAddr = true;
		},
		getAddress(){
			this.$request({
				url:'/findAddressByAid',
				data:{
					aid:this.aid
				},
				success:(res)=>{
					let e = res.data.result[0]
					this.nowAddress = `${e.province}-${e.city}-${e.county}`
					this.postalCode = e.postalCode
					this.name = e.name
					this.tel = e.tel
					this.addressDetail = e.addressDetail
					this.checked = e.isDefault ? true :false
				}
			})
		},
		selectAddr(e){
			this.nowAddress = `${e.province.label}-${e.city.label}-${e.area.label}`
			this.areaCode = `${e.province.value}-${e.city.value}-${e.area.value}`
			this.province = e.province.label
			this.city = e.city.label
			this.county = e.area.label
		},
		delAddress(){
			this.$request({
				url:'/deleteAddress',
				method:'POST',
				data:{
					aid:this.aid
				},
				success:(res)=>{
					if(res.data.code == 9000 || res.data.code == 30000 || res.data.code == 10000){
						uni.showToast({
							title:res.data.msg
						})
						setTimeout(()=>{
							uni.navigateTo({
								url: "../address"
							})
						},1000)
					}
				}
			})
		},
		submit(){
			let url = ''
			if(this.isEdit){
				url = '/editAddress'
			}else{
				url = '/addAddress'
			}
			let obj = {
				name: this.name,
				tel: this.tel,
				province: this.province,
				city: this.city,
				county: this.county,
				addressDetail: this.addressDetail,
				areaCode: this.areaCode,
				postalCode: this.postalCode,
				isDefault: this.checked ? 1 :0,
				aid:this.aid ? this.aid :''
			}
			this.$request({
				url:url,
				method:'POST',
				data:obj,
				success:(res)=>{
					// console.log(res)
					if(res.data.code == 9000 || res.data.code == 30000){
						uni.showToast({
							title:res.data.msg
						})
						setTimeout(()=>{
							uni.navigateTo({
								url: "../address"
							})
						},1000)
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}

.wrap {
	background-color: #f2f2f2;
	padding: 30rpx ;
	.top {
		background-color: #ffffff;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 1rpx #f2f2f2;
			&:nth-of-type(5) {
				border-bottom: none;
			}
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
	}
	.bottom {
		border-radius: 30rpx;
		margin-top: 20rpx;
		padding:  30rpx;
		background-color: #ffffff;
		font-size: 28rpx;
		.default {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.submit {
		height: 90rpx;
		font-size: 34rpx;
		border-radius: 60rpx;
		margin-top: 40rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		background-color: #0c34ba;
	}
	.white{
		color: #000;
		background-color: #fff;
	}
}
</style>
